<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="power_station.html"></a>
			<h1 class="mui-title">勤实电站移动数据中心</h1>
		</header>
		<div class="mui-slider" id="Gallery">
			<div class="mui-slider-group ">
				<!--第一个内容区容器-->
				<div class="mui-slider-item" id="1tab">
					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">勤实电站移动数据中心</h1>
					</header>
					<div class="mui-content">
						<div class="mui-col-xs-12" style="background: red;text-align: center;color: #fff;padding: 10px;">
							<div style="float: left;position: absolute;left:10px">
								<a style="border:1px solid #FFFFFF;border-radius:5px;padding: 2px;margin-right: 5px;color: #3cf142;background: #57585a;">&nbsp;01&nbsp;</a>号机</div>主机参数

						</div>
					</div>
				</div>
				<!--第二个内容区-->
				<div class="mui-slider-item " id="2tab">
					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">勤实电站移动数据中心</h1>
					</header>
					<div class="mui-content">
						<div class="mui-col-xs-12" style="background: #0B5527;text-align: center;color: #fff;padding: 10px;">
							<div style="float: left;position: absolute;left:10px">
								<a style="border:1px solid #FFFFFF;border-radius:5px;padding: 2px;margin-right: 5px;color: #3cf142;background: #57585a;">&nbsp;01&nbsp;</a>号机</div>发电机参数
						</div>
					</div>
				</div>
				<div class="mui-slider-item " id="3tab">
					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">勤实电站移动数据中心</h1>
					</header>
					<div class="mui-content">
						<div class="mui-col-xs-12" style="background: orange;text-align: center;color: #fff;padding: 10px;">公共系统参数
						</div>
					</div>
				</div>
				<div class="mui-slider-item mui-slider-item-duplicate" id="4tab">

					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">勤实电站移动数据中心</h1>
					</header>
					<div class="mui-content">
						<div class="mui-col-xs-12" style="background: orange;text-align: center;color: #fff;padding: 10px;">参数汇总</div>
					</div>

				</div>
				<div class="mui-slider-item" id="5tab">
					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">勤实电站移动数据中心</h1>
					</header>
					<div class="mui-content">
						<div class="mui-col-xs-12" style="background: orange;text-align: center;color: #fff;padding: 10px;">参数汇总</div>
					</div>
				</div>
			</div>
		</div>
		<div id="showData" style="position: absolute;top:85px;z-index: 9;width: 100%;display: none;"></div>
		<div id="showData2" style="position: absolute;top:85px;z-index: 9;width: 100%;display: none;"></div>
		<div id="showData3" style="position: absolute;top:85px;z-index: 9;width: 100%;display: none;"></div>
		<div id="showData4" style="position: absolute;top:85px;z-index: 9;width: 100%;display: none;"></div>
		<div id="showData5" style="position: absolute;top:85px;z-index: 9;width: 100%;display: none;"></div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<img src="images/shuju1.png" style="width: 20px;margin-top: 2px;" /><br>
				<span class="mui-tab-label ">数据</span>
			</a>
			<a class="mui-tab-item" onclick="location='baobiaoTable.html'">
				<img src="images/baobiao.png" style="width: 20px;margin-top: 2px;" /><br>
				<span class="mui-tab-label ">报表</span>
			</a>
			<a class="mui-tab-item ">
				<img src="images/gerenzhongxin.png" style="width: 20px;margin-top: 2px;" /><br>
				<span class="mui-tab-label ">个人中心</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

		<script type="text/javascript">
			mui.init()
			mui.ready(function() {
				var slider = document.getElementById('Gallery');
				var group = slider.querySelector('.mui-slider-group');
				var items = mui('.mui-slider-item', group);
				//克隆第一个节点
				var first = items[0].cloneNode(true);
				first.classList.add('mui-slider-item-duplicate');
				//克隆最后一个节点
				var last = items[items.length - 1].cloneNode(true);
				last.classList.add('mui-slider-item-duplicate');
				//处理是否循环逻辑，若支持循环，需支持两点：
				//1、在.mui-slider-group节点上增加.mui-slider-loop类
				//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
				var sliderApi = mui(slider).slider();
				group.classList.add('mui-slider-loop');
				group.insertBefore(last, group.firstChild);
				group.appendChild(first);
				sliderApi.refresh();

			});
			var slider = mui('#Gallery').slider();
			slider.gotoItem(1);
			$('#showData').load('parameter4.html');
			$('#showData2').load('parameter5.html');
			$('#showData3').load('parameter.html');
			$('#showData4').load('parameter2.html');
			$('#showData5').load('parameter3.html');
			$('#showData3').show();
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				if(event.detail.slideNumber === 0) {
					//					$('#1tab').load('parameter.html');

					//					$('#5tab').html("");
					$('#showData3').show();
					$('#showData').hide();
					$('#showData2').hide();
					$('#showData4').hide();
					$('#showData5').hide();
				}
				if(event.detail.slideNumber === 1) {

					//					$('#5tab').html("");
					$('#showData4').show();
					$('#showData').hide();
					$('#showData2').hide();
					$('#showData3').hide();
					$('#showData5').hide();
				} else if(event.detail.slideNumber === 2) {
					$('#showData4').hide();
					$('#showData').hide();
					$('#showData2').hide();
					$('#showData3').hide();
					$('#showData5').show();

				} else if(event.detail.slideNumber === 3) {

					$('#showData').show();
					$('#showData2').hide();
					$('#showData3').hide();
					$('#showData4').hide();
					$('#showData5').hide();
					//					$('#5tab').html("");

				} else if(event.detail.slideNumber === 4) {
					//					$('#showData').load('parameter5.html');
					//					$('#5tab').load('parameter5.html');
					$('#showData').hide();
					$('#showData2').show();
					$('#showData3').hide();
					$('#showData4').hide();
					$('#showData5').hide();
					$("td[data-field$='0']").remove();

				}
			});
			$(document).ready(function() {

				//$('#1tab').load('parameter.html');
				//				$('#2tab').load('parameter2.html');
				//				$('#3tab').load('parameter3.html');
				//				$('#4tab').load('parameter4.html');
				//				$('#5tab').load('parameter5.html');

			});
			var picker = new mui.PopPicker();

			function dtPicker() {
				picker.setData([{
					value: '月',
					text: '月'
				}, {
					value: '日',
					text: '日'
				}, {
					value: '秒',
					text: '秒'
				}]);
				picker.show(function(selectItems) {
					document.getElementById("dtPicker").innerHTML = selectItems[0].value + "▼";
				})
			}
		</script>
	</body>

</html>